<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI面试系统 - 结果</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="#">AI面试系统</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <span class="nav-link">欢迎，[[${#authentication?.principal?.username ?: '游客'}]]</span>
                </li>
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/interviews}">我的面试</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/logout}">退出登录</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container mt-5">
    <div class="row">
        <div class="col-md-10 offset-md-1">
            <div class="card shadow mb-4">
                <div class="card-header bg-success text-white">
                    <h3 class="mb-0">面试结果</h3>
                </div>
                <div class="card-body">
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h5>应聘职位: <span class="text-muted">[[${interview.jobPosition}]]</span></h5>
                        </div>
                        <div class="col-md-6">
                            <h5>日期: <span class="text-muted">[[${interview.endTime}]]</span></h5>
                        </div>
                    </div>

                    <div class="text-center mb-5">
                        <div class="display-4">[[${#numbers.formatDecimal(interview.finalScore, 1, 'COMMA', 1, 'POINT')}]]</div>
                        <div class="fs-4">/ 10.0</div>
                        <div class="mt-2">
                            <div class="progress mx-auto" style="width: 50%; height: 30px;">
                                <div class="progress-bar" role="progressbar"
                                     th:style="'width: ' + ${interview.finalScore * 10} + '%;'"
                                     th:classappend="${(interview.finalScore >= 7) ? 'bg-success' : ((interview.finalScore >= 4) ? 'bg-warning' : 'bg-danger')}"
                                     aria-valuenow="${interview.finalScore}" aria-valuemin="0" aria-valuemax="10">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-5">
                        <h4>总体反馈</h4>
                        <div class="card bg-light p-4">
                            <p th:text="${interview.feedback}" class="mb-0"></p>
                        </div>
                    </div>

                    <!-- 传统面试问题明细 -->
                    <div th:if="${questions != null && !questions.isEmpty()}">
                        <h4>问题明细</h4>
                        <div th:each="question : ${questions}" class="card mb-3">
                            <div class="card-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0">问题 [[${question.questionNumber}]]</h5>
                                    <span class="badge"
                                          th:classappend="${(question.score >= 7) ? 'bg-success' : ((question.score >= 4) ? 'bg-warning' : 'bg-danger')}">
        得分: [[${#numbers.formatDecimal(question.score, 1, 'COMMA', 1, 'POINT')}]]/10
    </span>
                                </div>
                            </div>
                            <div class="card-body">
                                <p class="card-text"><strong>问题:</strong> [[${question.question}]]</p>
                                <p class="card-text"><strong>你的回答:</strong> [[${question.userAnswer}]]</p>
                                <p class="card-text"><strong>反馈:</strong> [[${question.aiFeedback}]]</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 聊天式面试对话记录 -->
                    <div th:if="${questions == null || questions.isEmpty()}" th:with="chatMessages=${interview.chatMessages}">
                        <h4>面试对话记录</h4>
                        <div th:if="${chatMessages != null && !chatMessages.isEmpty()}" class="card">
                            <div class="card-body">
                                <div th:each="msg : ${chatMessages}" class="mb-3">
                                    <div th:if="${msg.sender.name() == 'USER'}" class="d-flex justify-content-end">
                                        <div class="bg-primary text-white p-3 rounded" style="max-width: 70%;">
                                            <strong>您:</strong> [[${msg.content}]]
                                            <br><small class="text-light">[[${msg.timestamp}]]</small>
                                        </div>
                                    </div>
                                    <div th:if="${msg.sender.name() == 'AI'}" class="d-flex justify-content-start">
                                        <div class="bg-light p-3 rounded" style="max-width: 70%;">
                                            <strong>AI面试官:</strong> [[${msg.content}]]
                                            <br><small class="text-muted">[[${msg.timestamp}]]</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div th:if="${chatMessages == null || chatMessages.isEmpty()}" class="alert alert-info">
                            暂无对话记录
                        </div>
                    </div>

                    <div class="text-center mt-5">
                        <a th:href="@{/interview}" class="btn btn-primary">开始新面试</a>
                        <a th:href="@{/interviews}" class="btn btn-secondary ms-2">查看所有面试</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>